{extend name="layout/layout" /}
{block name="header"}
	<header class="mui-bar mui-bar-nav">
		<h1 class="mui-title">分类</h1>
	</header>
{/block}
{block name="style"}
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.css">
	<style>
		.top-cate{
			background: #EEE;
			color:#9B9B9B;
			height: 500px;
			overflow-y: scroll;
		}

		.mui-table-view{
			background: #EEE;
		}

		.mui-table-view-cell{
			padding: 15px 0;
			text-align: center;
			font-size:14px;
		}
		.mui-table-view-cell:after{
			left: 0;
			color: #E1E1E1;
		}

		.mui-table-view-cell.active{
			background: #fff;
			color: #333;
		}

		.son-cate{
			padding: 10px 5px;
			height: 500px;
			overflow-y: scroll;
			background: #fff;
		}

		.cate-group{
			margin-bottom: 5px;
			font-size: 12px;
		}

		.cate-title{
			line-height: 40px;
			color: #9B9B9B;
		}

		.cate-name{
			font-size: 12px;
		}

		.cate-img{
			padding: 0 5px;
		}
	</style>
{/block}

{block name="main"}
	<div class="category-index mui-row" v-cloak>
		<div class="mui-col-xs-3 top-cate">
			<ul class="mui-table-view">
			    <li class="mui-table-view-cell" :class="ti == cateIndex?'active':''" @tap="cateIndex = ti,getSonCate()" v-for="(tc, ti) in topCates">{{tc.name}}</li>
			</ul>
		</div>	

		<div class="mui-col-xs-9 son-cate">
			<div class="banners">
				<div class="swiper-container banner-swiper">
				    <div class="swiper-wrapper">
				        <div class="swiper-slide" v-for="ban in banners" @tap="checkAd(ban)">
				        	<img :src="ban.app_image" class="img-responsive" />
				        </div>
				    </div>
				    <!-- 如果需要分页器 -->
				    <div class="swiper-pagination"></div>
				    
				</div>
			</div>
			<div class="cate-group" v-for="item in topCates[cateIndex]['son']">
				<div class="cate-title">{{item.name}}</div>
				<div class="cate-list mui-row" >
					<div class="cate-item mui-col-xs-4 mui-text-center" v-for="son in item.son_category">
						<a :href="'/mobile/category/goodsList/id/'+son.id">
							<div class="cate-img">
								<img :src="son.image" class="img-responsive" alt="">
							</div>
							<p class="cate-name">{{son.name}}</p>
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
{/block}

{block name="script"}
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.js"></script>
	<script>
		var wh = $(document).height()-52;
		$('.top-cate,.son-cate').css({'height':wh+'px'});
		var indexVue = new Vue({
			el:'.category-index',
			data: {
				topCates: [{
					son:[]
				}],
				cateIndex: 0,
				banners:[],
			},
			mounted: function(){
				this.getTopCate();
			},
			methods: {
				//获取一级分类
				getTopCate: function(){
					var that = this;
					request(that, {'url': 'category/index'}, function(responsive){
						if(responsive.code == 200){
							
							if(responsive.data.category.length > 0) {
								responsive.data.category.forEach(function(item){
									item.son = [];
								});
								that.topCates = responsive.data.category;
								that.getSonCate();
							}
							that.banners = responsive.data.banners;
							that.bannerSwiper();
						}
					})
				},
				//获取一级分类下的子分类
				getSonCate: function(){
					var that = this;
					var cid = this.topCates[this.cateIndex]['id'];
					var url =  'category/getSonCategory';
					request(that, {'url': url,'data': {'id':cid}}, function(res){
						if(res.code == 200) {
							that.topCates[that.cateIndex]['son'] = res.data;
						} else {
							mui.toast(res.msg);
						}	
					});
				},
				bannerSwiper:function(){
                    var bannerSwiper = new Swiper('.banner-swiper', {
                        observer:true, //修改swiper自己或子元素时，自动初始化swiper
    					observeParents:true,//修改swiper的父元素时，自动初始化swiper
    					pagination: {
						    el: '.swiper-pagination',
						},
                    });
                },
                //广告判断
                checkAd: function(item) {
                	switch(item.android_class) {
                		case 'CateListActivity':
                			//分类商品
                			if(item.param_id) {
                				location.href = '/mobile/category/goodsList/id/'+item.param_id;
                			}
                			break;

                		case 'WebviewActivity':
                			//网页
                			if(item.url) {
                				location.href = item.url;
                			}
                			break;
                		
                		case 'WZGWShopDetailViewController':
                			//商品详情
                			if(item.param_id) {
                				location.href = '/mobile/goods/detail/id/'+item.param_id;
                			}
                			break;
                		
                		default:;
                	}

                }
			}
		});
	</script>
{/block}